<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-select v-model="select_cate" placeholder="搜索选项" class="handle-select mr10">
                    <el-option key="1" value="领取手机号"></el-option>
                    <el-option key="2" value="渠道"></el-option>
                </el-select>
                <el-input v-model="select_word" placeholder="关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
            </div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelectTab">
                <el-menu-item index="1">未注册</el-menu-item>
                <el-menu-item index="2">已注册</el-menu-item>
            </el-menu>
            <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column prop="name" label="领取时间">
                    <!-- sortable -->
                </el-table-column>
                <el-table-column prop="address" label="注册时间" v-if="activeIndex==2">
                    <!-- sortable -->
                </el-table-column>
                <el-table-column prop="address" :label="activeIndex==2?'领取手机号':'注册手机号'">
                </el-table-column>
                <el-table-column prop="address" label="渠道">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="100">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { list } from '@/service/serviceLcm';
export default {
    name: 'invitationManage',
    data() {
        return {
            url: '../../../../../static/vuetable.json',
            tableData: [],
            cur_page: 1,
            multipleSelection: [],
            select_cate: '',
            select_word: '',
            del_list: [],
            is_search: false,
            editVisible: false,
            delVisible: false,
            form: {
                name: '',
                textarea: '',
                user: '',
                project: ''
            },
            idx: -1,
            addorEdit: '', //新增或编辑
            activeIndex: '1', //tab默认
        }
    },
    created() {
        this.getData();
    },
    computed: {
        data() {
            return this.tableData.filter((d) => {
                let is_del = false;
                for (let i = 0; i < this.del_list.length; i++) {
                    if (d.name === this.del_list[i].name) {
                        is_del = true;
                        break;
                    }
                }
                if (!is_del) {
                    return d;
                }
            })
        }
    },
    methods: {
        // 分页导航
        handleCurrentChange(val) {
            this.cur_page = val;
            this.getData();
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            // this.$axios.get(this.url, {
            //     page: this.cur_page
            // }).then((res) => {
            //     this.tableData = res.data.list;
            // })
            list(this.cur_page).then(data => {
                this.tableData = data.list;
            })
        },
        search() { //搜索
            this.is_search = true;
        },
        formatter(row, column) {
            return row.address;
        },
        addProblem() { //新增
            this.addorEdit = '新增';
            this.editVisible = true;
            this.form = {}
        },
        handleEdit(index, row) { //编辑
            this.addorEdit = '编辑';
            this.idx = index;
            const item = this.tableData[index];
            this.form = {
                name: item.name,
                date: item.date,
                address: item.address
            }
            this.editVisible = true;
        },
        handleDelete(index, row) { //删除
            this.idx = index;
            this.delVisible = true;
        },
        operateMore() { //批量下线
            const length = this.multipleSelection.length;
            let str = '';
            this.del_list = this.del_list.concat(this.multipleSelection);
            /* for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error('删除了' + str);
            this.multipleSelection = []; */
        },
        handleSelectTab(index) {
            this.activeIndex = index;
        },
        handleSelectionChange(val) { //表格选中
            this.multipleSelection = val;
        },
        // 保存编辑
        saveEdit() {
            this.$set(this.tableData, this.idx, this.form);
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx+1} 行成功`);
        },
        // 确定删除
        deleteRow() {
            this.tableData.splice(this.idx, 1);
            this.$message.success('删除成功');
            this.delVisible = false;
        }
    }
}

</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.del-dialog-cnt {
    font-size: 16px;
    text-align: center
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.addButton {
    float: right;
}

.handleMore {
    float: right;
}

</style>
